<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../static/css/font.css">
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link rel="stylesheet" href="../../lib/layui/layui.css">
    <script type="text/javascript" src="../../js/jquery.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/jquery-sortable-lists.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #fff;
            color: #555;
            font: 14px;
            line-height: 1.5;
            font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
        }

        /* General & 'Reset' Stuff */

        html, body, ul, li {
            margin: 0;
            padding: 0;
        }

        ul, li {
            list-style-type: none;
            color: #555;
            border: 1px solid #ddd;
        }

        ul.sTree, ul {
            padding: 0px;
            background-color: #fff;
        }

        ul.sTree li {
            padding-left: 50px;
            margin: 5px;
            border: 1px solid #ddd;
            background-color: #eee;
        }

        li div {
            padding: 7px;
            background-color: #fff;
        }

        li, ul, div {
            border-radius: 3px;
        }


        #sTree {
            margin: 10px auto;
        }
    </style>
</head>
<body>
<script type="text/javascript" defer="defer">
    $(function () {
        var options = {
                placeholderCss: {'background-color': '#ff8'},
                hintCss: {'background-color': '#bbf'},
                isAllowed: function (cEl, hint, target) {
                    if (hint.parents('li').first().data('module') === 'c' && cEl.data('module') !== 'c') {
                        hint.css('background-color', '#ff9999');
                        return false;
                    } else {
                        hint.css('background-color', '#99ff99');
                        return true;
                    }
                },
                opener: {
                    active: true,
                    close: 'https://www.jsdaima.com/Upload/1474126457/Remove2.png',
                    open: 'https://www.jsdaima.com/Upload/1474126457/Add2.png',
                    openerCss: {
                        'display': 'inline-block',
                        'width': '18px',
                        'height': '18px',
                        'float': 'left',
                        'margin-left': '-35px',
                        'margin-right': '5px',
                        'background-position': 'center center',
                        'background-repeat': 'no-repeat'
                    },
                    openerClass: ''
                }
            },

            sWrapper = $('#settingsWrapper');

        $('#sTree2, #sTree').sortableLists(options);

        $('#toArrBtn').on('click', function () {
            console.log($('#sTree2').sortableListsToArray());
        });
        $('#toHierBtn').on('click', function () {
            console.log($('#sTree2').sortableListsToHierarchy());
        });
        $('#toStrBtn').on('click', function () {
            console.log($('#sTree2').sortableListsToString());
        });
        $('.descPicture').on('click', function (e) {
            $(this).toggleClass('descPictureClose');
        });
    });
</script>
<div class="weadmin-nav">
    <span class="layui-breadcrumb" style="visibility: visible;">
        <a href="javascript:;">首页</a><span lay-separator="">/</span> <a href="javascript:;">内容管理</a><span
            lay-separator="">/</span>
        <a href="javascript:;"> <cite>导航管理</cite></a>
    </span>
    <a class="layui-btn layui-btn-sm" style="margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh"></i>
    </a>
</div>
<div class="weadmin-body">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>主导航</legend>
                <div class="weadmin-block layui-layout-right">
                    <button class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-website"></i>预览</button>
                    <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-release"></i>发布</button>
                    <button class="layui-btn layui-btn-normal"><i class="layui-icon"></i>添加</button>
                </div>
                <ul class="sTree listsClass" id="sTree">
                    <li id="item_a" data-module="a">
                        <div>
                            首页
                            <span style="float: right;">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </span>
                        </div>
                    </li>
                    <li id="item_b1" data-module="b"
                        style="width: auto; position: relative; top: 0px; left: 0px; visibility: visible;">
                        <div>最新产品
                            <span style="float: right;">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </span></div>
                    </li>
                    <li class="sortableListsOpen" id="item_b" data-module="b"
                        style="width: auto; position: relative; top: 0px; left: 0px;">
                        <div><span class="sortableListsOpener"
                                   style="float: left; display: inline-block; background-position: center center; background-repeat: no-repeat; width: 18px; height: 18px; margin-left: -35px; margin-right: 5px;"></span>所有产品

                            <span style="float: right;">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </span></div>
                        <ul>
                            <li id="item_b3" data-module="b" class="sortableListsOpen"
                                style="width: auto; position: relative; top: 0px; left: 0px; visibility: visible;">
                                <div>奶粉
                                    <span style="float: right;">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </span></div>
                            </li>
                            <li id="item_b4" data-module="b">
                                <div>红酒
                                    <span style="float: right;">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </span></div>
                            </li>
                            <li id="item_b5" data-module="b">
                                <div>洗护用品
                                    <span style="float: right;">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </span></div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </fieldset>
        </div>
        <div class="layui-col-md4">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>导航列表</legend>
                <div class="weadmin-block layui-layout-right">
                    <button class="layui-btn layui-btn-normal"><i class="layui-icon"></i>添加</button>
                </div>
                <table class="layui-table">
                    <colgroup>
                        <col>
                        <col width="120">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>主导航</td>
                        <td>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>头部导航</td>
                        <td>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>底部导航</td>
                        <td>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>友情链接</td>
                        <td>
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a
                                class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </fieldset>
        </div>
    </div>
</div>
</body>
</html>